<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>保持宽高比</title>
    <style>
      .container {
        width: 40%;
        background-color: lightblue;
        padding: 20px 40px;
      }

      .inner {
        width: 100%;
        /* 如何让高度为宽度的75%? */

        /* 第一种方法使用css3新属性-兼容性问题 */
        /* aspect-ratio: 4/3; */
        /* 第二种方法padding使用百分比是包含块的宽度的百分比 */
        padding-bottom: 75%;
        height: 0;
        background-color: lightseagreen;
        position: relative;
      }

      .main {
        position: absolute;
        inset: 0;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="inner">
        <section class="main">主内容</section>
      </section>
      <p>这里会有一些文字</p>
    </main>
  </body>
</html>
